<script>
import config from '../config'

export default {
  name: 'ProductDetailView',

  data () {
    return {
      product: {},
      productDesc: "",
      cdn: config.cdn
    }
  },

  methods: {
    loadPageConfig() {
      this.$store
        .dispatch('FETCH_PRODUCT_DETAIL', { id: this.$route.params.productId })
        .then(() => {
          console.log(this.$store.state)
          this.product = this.$store.state.productDetail.productDetail
          this.productDesc = this.$store.state.productDetail.productDesc
        })
    }
  },

  beforeMount() {
    this.loadPageConfig()
  }
}
</script>

<template>
  <div id="product-detail-view">
    <div class="block-content">
      <div class="container">
        <div class="root-nav" style="margin: 5px 0;">
          <a @click="onClickCategory(0)">人马商城</a>&nbsp;>&nbsp;
          <a @click="onClickCategory(0)">所有商品</a>&nbsp;>&nbsp;
          <a href="javascript:void(0);" class="active">商品详情</a>
        </div>
      </div>
      
      <div class="container" style="margin: 2rem auto 4rem auto;">
        <div class="clearfix">
          <div class="pull-left" style="width: 400px; margin-top: 200px; text-align: center;">
            <img :src="`${cdn}/${product.qrcode}-qrcode`" style="width: 180px; height: 180px;">
            <p>亲，可通过手机扫描上方二维码下单哦~</p>
            <p>ps：使用微信扫一扫将会使用微信支付。如需支付宝支付，请在其他浏览器打开。或者使用其他app的扫一扫功能。</p>
          </div>
          <div class="pull-left products-grid" style="width: 370px;padding: 0px 10px 10px 10px;margin-left: 100px;overflow: hidden;background: rgb(0, 0, 0);border-radius: 1.2rem;height: 700px;">
            <p class="text-center" style="color: #fff;">手机效果预览</p>

            <div style="height: 600px;overflow: scroll;">
              <div class="item" style="overflow: visible;">
                <img class="item-image" :src="`${cdn}/${product.cover}`" style="width: 100%;">
                <div class="item-body">
                  <h3>{{ product.name }}</h3>
                  <p>
                    <template v-if="product.tags">
                      <label v-for="(tag, key) in product.tags" :class="'tag tag-' + key">{{ tag.name }}</label>
                    </template>
                  </p>
                  <p class="description">{{ product.summary }}</p>
                  <p class="amount">
                    <span>&yen;&nbsp;{{ product.currentOffer / 100 }}</span>
                  </p>
                  <div v-html="productDesc"></div>
                </div>
              </div>
            </div>
          </div >
        </div>
      </div>

    </div>
  </div>
</template>

<style>
@import '../../static/styles/product.css';

</style>

